<template>
	<yd-layout id='allClass' class=''>
		<div class="content">
			<div class="left">
				<div class="left_item" @click="navClick(item.id)" :class="item.id==navNum?'left_item_active':''" v-for="item,index in catesList">{{item.title}}</div>
			</div>
			<div class="right">
				<yd-infinitescroll v-show='videoList.length>0' :callback="getVideoLst" ref="infinitescrollDemo">
					<VideoList :goVideoPlay = 'goVideoPlay' slot="list" :dataList='videoList'></VideoList>
					<!-- 数据全部加载完毕显示 -->
			        <span slot="doneTip">没有更多数据了~~</span>
			
			        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
			        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
				<div v-if='videoList.length==0' class="no_list">暂无内容</div>
				
			</div>
		</div>
	</yd-layout>
</template>

<script>
	import VideoList from '../../components/VideoList/VideoList.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	export default{
		components:{
			[VideoList.name]: VideoList,
			[InfiniteScroll.name]: InfiniteScroll,
		},
		data(){
			return {
				catesList:[{title:'全部课程',id:0}],
				videoList:[],
				pageNum: 1,
				pageCount: 10,
				cateId:0,
				navNum:0
			}
		},
		created() {
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			this.navNum = this.$route.query.pid
			this.catesList = [{title:'全部课程',id:this.$route.query.pid}]
			if(this.$route.query.pid=='3000'){
				document.title='领袖修炼'
			}else{
				document.title='精英进阶'
			}
			
			this.getCates()
		},
		methods:{
			//去视频播放页面
			goVideoPlay(item){
				this.$root.videoPlayFlg(item)
			},
			getCates(){
				this.$root.ajax({
					name: 'video/cates',
					type:'get',
					closeloadingClose:true,
					params: {
						pid	: this.$route.query.pid||'2000'
					}
				}).then((d) => {
					console.log(d)
					this.catesList=[...this.catesList,...d.data]
					this.navNum = this.$route.query.pid
					this.cateId = this.$route.query.pid
					this.getVideoLst(true);
				})
			},
			getVideoLst(flg){
				this.$root.ajax({
					name: 'video/lst',
					type:'get',
					closeloadingOpen:flg?true:false,
					params: {
						page:this.pageNum,
						count:this.pageCount,
						cate_id:this.cateId
					}
				}).then((d) => {
					this.videoList = [...this.videoList, ...d.data.video_list];
                    if (this.videoList.length >= d.data.video_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
				})
			},
			navClick(id){
				this.navNum=id
				this.pageNum=1;
				this.pageCount=10;
				this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
				this.videoList=[]
				this.cateId = id
				this.getVideoLst();
			}
		}
	}
</script>

<style lang="scss">
	@import './allClass.scss';
</style>